
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title></title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/table.css" rel="stylesheet" type="text/css">
    <style>
        .th th{background-color: #e9dfd7 !important;}
    </style>
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto" onload="onload()">
<div class="notice_main">
    <h6>加载进度条</h6>
    <div class="notice_check">
        <div class="btn-group l_left" style="margin-right: 4px">
            <button type="button" class="btn btn-default change" style="height: 30px;line-height: 30px;padding: 0 12px !important;font-size: 12px">选择条件</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 30px;line-height: 30px">
                <span class="caret"></span>
                <span class="sr-only"></span>
            </button>
            <ul class="dropdown-menu">
                <li>角色名称</li>
                <li>角色描述</li>
            </ul>
        </div>
        <div class="l_left">
            <input type="text" class="find_input">

        </div>
        <button class="check_btn" onclick="clicks()">查询</button>

        <div class="notice_nav r_right">
            <a class="btn btn-default" onclick="addRole()"><span class="glyphicon glyphicon-plus"></span>新增</a>
            <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>删除</a>
            <a class="btn btn-default" onclick="addRole()"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </div>
    </div>
    <table id="table" class="table_style" style="margin: 0 auto" > </table>
</div>
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/bstable/js/bootstrap.min.js"></script>
    <script src="js/bstable/js/bootstrap-table.js"></script>
    <script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/layer_v2.1/layer/layer.js"></script>
    <script>
        function onload(){

            layer.load();
            setTimeout(function(){
            layer.closeAll('loading');
            $('#table').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/role.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: 10,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams:null,
                columns: [
                    {
                        checkbox: "true",
                        field: 'check',
                        align: 'center',
                        valign: 'middle'
                    }
                    ,
                    {
                        title: "角色编号",
                        field: 'id',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '角色名称',
                        field: 'title',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '创建时间',
                        field: 'date',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '角色描述',
                        field: 'person',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        field: 'person',
                        align: 'center',
                        formatter:function (val,row) {
                           e='<a href="#" onclick="lookLow()">查看流程</a>';
                            return e;

                        }
                    }
                ]
            });
        }, 1000);
        }
        function clicks(){
            layer.msg('数据刷新中', {
                icon: 16,
                shade: 0.01,
                time: 20000
            });
            setTimeout(function(){
                layer.closeAll('dialog');
            }, 3000);
        }
        function change(){
            $(".dropdown-menu>li").click(function(){
                $(".change").html($(this).html())
            })
        }
        function addRole(){

                //加载层-默认风格
            layer.load();
                //此处演示关闭
                setTimeout(function(){
                    layer.closeAll('loading');
                }, 500);

            layer.open({

                type: 2,
                title: '添加详情',
                shadeClose: true,
                shade: 0.5,
                skin: 'layui-layer-rim',
                closeBtn:1,
                area: ['700px', '474px'],
                content: 'table2_tail.html'
            });
        }
function lookLow() {
    layer.open({

        type: 2,
        title: '添加详情',
        shadeClose: true,
        shade: 0.5,
        skin: 'layui-layer-rim',
        closeBtn:1,
        area: ['1200px', '500px'],
        content: 'lowTail.html'
    });

}
    </script>
</body>
</html>
